<template>
  <div class="inputWrapper">
    <!-- 1. 未激活样式 input -->
    <div class="disable" v-if="!isShowTextarea">
      <input type="text" @focus="showTextarea" :value="content" />
      <div class="commentWrapper">
        <span class="iconfont iconpinglun-"></span>
        <div class="num">1024</div>
      </div>
      <span class="iconfont iconshoucang"></span>
      <span class="iconfont iconfenxiang"></span>
    </div>
    <!-- 2. 已激活样式 textarea -->
    <div class="enable" v-if="isShowTextarea">
      <textarea v-model="content" ref="textarea" rows="3" @blur="hideTextarea"></textarea>
      <div class="sendBtn" @click="send">发送</div>
    </div>
  </div>
</template>

<script>
import Bus from "@/utils/Bus";
export default {
  // props: ["parent_id"],
  data() {
    return {
      isShowTextarea: false,
      content: "",
      parent_id: "",
    };
  },
  created() {
    // 组件创建后 就要开始监听 公共事件总线的回复事件
    // $on 有两个参数 第一个是自定义事件名 第二个是回调函数

    Bus.$on("callReply", (id) => {
      console.log("我要回复", id);
      this.parent_id = id;
      this.showTextarea();
    });
  },
  methods: {
    showTextarea() {
      this.isShowTextarea = true;

      this.$nextTick(() => {
        this.$refs.textarea.focus();
      });
    },
    hideTextarea() {
      // 隐藏输入框 可能是点击按钮触发的 不能马上隐藏 等到click发送完毕再隐藏
      setTimeout(() => {
        this.isShowTextarea = false;
      }, 50);
    },
    send() {
      // 这里可以获取评论内容
      console.log(this.content);
      // 可以获取文章 id
      console.log(this.$route.query.id);

      if (!this.content) {
        return;
      }

      this.$axios({
        method: "post",
        url: "/post_comment/" + this.$route.query.id,
        data: {
          content: this.content,
          parent_id: this.parent_id,
        },
      }).then((res) => {
        console.log(res.data);
        this.content = "";
        this.$emit("reloadComments");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.inputWrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #e4e4e4;
  width: 100%;
  .disable {
    display: flex;
    justify-content: space-between;
    padding: 10/360 * 100vw;
    input {
      height: 30/360 * 100vw;
      line-height: 30/360 * 100vw;
      background-color: #ccc;
      border: none;
      outline: none;
      border-radius: 16/360 * 100vw;
      padding: 0 16/360 * 100vw;
      width: 178/360 * 100vw;
      box-sizing: border-box;
    }
    .iconfont {
      font-size: 24/360 * 100vw;
    }
    .commentWrapper {
      position: relative;
      .num {
        position: absolute;
        top: -4px;
        left: 5px;
        font-size: 12/360 * 100vw;
        color: #fff;
        background-color: red;
        padding: 1px 4px;
        border-radius: 6px;
      }
    }
  }
  .enable {
    display: flex;
    align-items: flex-end;
    padding: 10/360 * 100vw;
    textarea {
      flex: 1;
      padding: 14/360 * 100vw;
      border-radius: 14/360 * 100vw;
      background-color: #ccc;
      border: none;
      outline: none;
    }
    .sendBtn {
      background-color: red;
      color: #fff;
      font-size: 12/360 * 100vw;
      line-height: 22/360 * 100vw;
      padding: 0 14/360 * 100vw;
      border-radius: 12/360 * 100vw;
      margin-left: 10/360 * 100vw;
    }
  }
}
</style>